<template>
  <div class="message">
    <!-- top -->
    <TopView name="message" title="留言板" msg="雪糕的甜味你有，九月清晨的完美你有，总之，我喜欢的样貌你都有"></TopView>

    <div class="message-wrap">
      <div class="content">
        <!-- 留言表单 -->
        <h2 style="margin-bottom: 20px">留言</h2>
        <el-form ref="form" :model="form" label-width="100px" :rules="rules">
          <el-form-item label="昵称" prop="nickname">
            <el-input placeholder="请输入昵称" v-model="form.nickname"></el-input>
          </el-form-item>
          <el-form-item label="留言" prop="content">
            <el-input style="height: 150px" type="textarea" placeholder="请输入留言" v-model="form.content"></el-input>
          </el-form-item>
          <el-form-item label="头像地址" prop="avatar">
            <el-input placeholder="请输入头像地址" v-model="form.avatar"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input placeholder="请输入邮箱" v-model="form.email"></el-input>
          </el-form-item>
        </el-form>

        <div style="text-align: right; margin-bottom: 20px">
          <el-button type="primary" @click="publish('form')">发布</el-button>
        </div>

        <!-- 留言列表 -->
        <h2 style="padding: 20px 0; box-sizing: border-box; border-top: 2px solid #0bbd87">
          全部留言
          <span style="margin-left: 10px; color: #f2711c; font-weight: bold">{{ messageList.length }}</span>
        </h2>
        <!-- 父级评论 -->
        <div class="list" v-for="item in messageList" :key="item.id">
          <el-image :src="item.avatar" lazy fit="cover" />
          <div class="detail">
            <div class="top">
              <span class="name">{{ item.nickname }}</span>
              <span class="time">{{ item.createTime }}</span>
            </div>
            <div class="bottom">{{ item.content }}</div>
            <el-button type="text" size="small" @click="reply(item)">
              回复
              <span v-if="item.replyMessages.length > 0">{{ item.replyMessages.length }}</span>
            </el-button>

            <!-- 子级评论 -->
            <template v-if="item.replyMessages.length > 0">
              <div style="background-color: #f0f8ff" class="list" v-for="sub_item in item.replyMessages" :key="sub_item.id">
                <el-image :src="sub_item.avatar" lazy fit="cover" />
                <div class="detail">
                  <div class="top">
                    <span class="name">{{ sub_item.nickname }}</span>
                    <span class="time">{{ sub_item.createTime }}</span>
                  </div>
                  <div class="bottom">{{ sub_item.content }}</div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>

    <!-- 弹框 -->
    <el-dialog :title="dialogTitle" :visible.sync="showDialog" :close-on-click-modal="false" @close="closeDialog('form')" @close-on-press-escape="closeDialog('form')">
      <el-form ref="form" :model="form" label-width="100px" :rules="rules">
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="form.nickname" placeholder="请输入昵称" />
        </el-form-item>
        <el-form-item label="回复" prop="content">
          <el-input style="height: 150px" type="textarea" v-model="form.content" placeholder="请输入回复" />
        </el-form-item>
        <el-form-item label="头像地址" prop="avatar">
          <el-input placeholder="请输入头像地址" v-model="form.avatar"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input placeholder="请输入邮箱" v-model="form.email"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button type="danger" @click="closeDialog('form')">取消</el-button>
        <el-button type="primary" @click="replyConfirm('form')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TopView from '@/components/TopView.vue'
import messageApi from '@/api/message.js'
export default {
  name: 'MessageView',
  components: {
    TopView
  },
  data() {
    return {
      showDialog: false,
      dialogTitle: '',
      messageList: [],
      form: {
        nickname: '',
        email: '',
        content: '',
        avatar: 'https://test-1256689020.cos.ap-nanjing.myqcloud.com/images/qq5.jpg',
        parentMessageId: '-1',
        adminMessage: true
      },
      rules: {
        nickname: [{ required: true, message: '昵称不能为空', trigger: 'blur' }],
        content: [{ required: true, message: '留言不能为空', trigger: 'blur' }],
        avatar: [{ required: true, message: '头像地址不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.list()
  },
  methods: {
    list() {
      messageApi.list().then(response => {
        if (response.code === 20000) {
          this.messageList = response.data.data
        } else {
          this.$message.error(response.message)
        }
      })
    },

    // 发布留言
    publish(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const form = new FormData()
          form.append('nickname', this.form.nickname)
          form.append('email', this.form.email)
          form.append('content', this.form.content)
          form.append('parentMessageId', this.form.parentMessageId)
          form.append('avatar', this.form.avatar)
          form.append('adminMessage', this.form.adminMessage)

          messageApi.save(form).then(response => {
            if (response.code === 20000) {
              this.$message.success(response.message)
              // 清除缓存
              this.closeDialog('form')
              // 刷新页面
              this.list()
            } else {
              this.$message.error(response.message)
            }
          })
        }
      })
    },

    // 回复按钮
    reply(message) {
      this.form.parentMessageId = message.id
      this.dialogTitle = '回复' + message.nickname + '的留言'
      this.showDialog = true
    },

    // 确认回复按钮
    replyConfirm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const form = new FormData()
          form.append('nickname', this.form.nickname)
          form.append('email', this.form.email)
          form.append('content', this.form.content)
          form.append('parentMessageId', this.form.parentMessageId)
          form.append('avatar', this.form.avatar)
          form.append('adminMessage', this.form.adminMessage)

          messageApi.save(form).then(response => {
            if (response.code === 20000) {
              this.$message.success(response.message)
              // 清除缓存
              this.closeDialog('form')
              // 刷新页面
              this.list()
            } else {
              this.$message.error(response.message)
            }
          })
        }
      })
    },

    // 关弹框
    closeDialog(formName) {
      this.$refs[formName].resetFields()
      this.form = {
        nickname: '',
        email: '',
        content: '',
        avatar: 'https://test-1256689020.cos.ap-nanjing.myqcloud.com/images/qq5.jpg',
        parentMessageId: '-1',
        adminMessage: true
      }
      this.showDialog = false
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-textarea__inner {
  height: 100%;
}

/deep/ .el-button--text {
  color: #0bbd87;
  font-weight: bold;
}

.message {
  width: 100%;
  height: auto;

  .message-wrap {
    width: 100%;
    height: auto;
    padding: 0 10%;
    box-sizing: border-box;
    opacity: 0.95;
    display: flex;
    flex-direction: column;
    position: relative;
    top: -60px;
    left: 0;

    .content {
      width: 80%;
      height: auto;
      margin: 0 auto 30px auto;
      padding: 30px;
      box-sizing: border-box;
      border-radius: 5px;
      border: 1px solid #eaeefb;
      background-color: #fff;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      text-align: left;

      .list {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 5px;
        height: auto;
        display: flex;
        justify-content: flex-start;
        flex-flow: row nowrap;
        margin-bottom: 10px;

        .el-image {
          height: 40px;
          width: 40px;
          border-radius: 50%;
          vertical-align: middle;
          max-width: 100%;
        }

        .detail {
          width: 100%;
          padding: 0 10px;
          box-sizing: border-box;

          .top {
            margin-bottom: 10px;
            .name {
              font-weight: bold;
              margin-right: 10px;
            }
            .time {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
</style>
